<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览。-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <!-- 是否允许h5页面在手机中调用拨打电话功能 -->
    <meta name="format-detection" content="telephone=yes" />
    <!-- title标签设置 -->
    <title>楼盘详情</title>
    <!-- 重置样式 -->
    <link rel="stylesheet" href="main/css/normalize.css" />
    <!-- common.css 公共样式 -->
    <link rel="stylesheet" href="main/css/common.css" />
    <!-- vant-ui css cdn -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
    <!-- awesome 字体图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
    <!-- px to rem -->
    <script src="main/js/rem.js"></script>
    <!-- vue.js -->
    <script src="main/js/vue.js"></script>
    <!-- vant-ui.js cdn-->
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <!-- axios请求 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <transition name="fade">
        <header id="app-top" style="display: none">
          <svg t="1616487901618" class="icon back-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2278" width="200" height="200">
            <path
              d="M867.648 951.296 512 595.648l-355.648 355.648c-11.52 11.52-30.272 11.52-41.856 0L72.64 909.44c-11.52-11.52-11.52-30.272 0-41.856L428.352 512 72.64 156.352c-11.52-11.52-11.52-30.272 0-41.856l41.856-41.856c11.52-11.52 30.272-11.52 41.856 0L512 428.288l355.648-355.648c11.52-11.52 30.272-11.52 41.856 0l41.856 41.856c11.52 11.52 11.52 30.272 0 41.856L595.648 512l355.648 355.648c11.52 11.52 11.52 30.272 0 41.856l-41.856 41.856C897.984 962.88 879.168 962.88 867.648 951.296L867.648 951.296z"
              p-id="2279"
            ></path>
          </svg>
        </header>
      </transition>

      <section id="app-content">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :show-indicators="false" v-if="floorData.houseUrl && floorData.houseUrl.length>0">
          <van-swipe-item v-for="(item, index) in floorData.houseUrl" :key="index">
            <img :src=" BASE_URL+item.url" alt="图片被外星人抓走了" />
          </van-swipe-item>
        </van-swipe>

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :show-indicators="false" v-else>
          <van-swipe-item>
            <img src="./main/images/fc.jpg" alt="" />
          </van-swipe-item>
        </van-swipe>

        <div id="round-content">
          <div class="floor-title">
            <h1 class="floor-name">{{floorData.houseName?floorData.houseName:failTitle}}</h1>
            <div class="floor-tips">
              <div class="floor-tips-item" v-for="(item, index) in floorData.houseLabel" :key="index">{{item}}</div>
            </div>
            <div class="floor-info">
              <div class="average-info"><span class="info-name">参考价格:</span><span class="info-c info-c-color">{{floorData.averagePrice?floorData.averagePrice+'/㎡':failTitle}}</span></div>

              <div class="average-info">
                <span class="info-name">楼盘地址:</span>
                <span class="info-c" v-if="floorData.address" style="display: flex; align-items: center">
                  <svg t="1617067892822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2096" width="16" height="16">
                    <path
                      d="M813.44 386.346667A298.666667 298.666667 0 0 0 725.333333 173.226667a302.293333 302.293333 0 0 0-426.666666 0 301.013333 301.013333 0 0 0 0 426.666666L445.866667 746.666667a93.653333 93.653333 0 0 0 132.266666 0l147.2-147.413334a298.666667 298.666667 0 0 0 88.106667-212.906666zM680.96 554.666667L533.333333 701.653333a30.933333 30.933333 0 0 1-43.946666 0L343.04 554.666667a237.653333 237.653333 0 0 1 0-337.28A238.72 238.72 0 1 1 681.173333 554.666667"
                      p-id="2097"
                      fill="#AF00C8"
                    ></path>
                    <path
                      d="M512 938.666667c-196.48 0-405.333333-62.08-405.333333-177.28 0-29.226667 14.506667-72.32 82.986666-110.72a31.36 31.36 0 0 1 30.506667 54.613333c-32.426667 18.133333-51.2 38.613333-51.2 56.106667 0 46.933333 133.76 114.773333 343.04 114.773333s343.04-67.84 343.04-114.773333c0-17.493333-18.773333-37.973333-51.2-56.106667a31.36 31.36 0 0 1 30.506667-54.613333c68.48 38.4 82.986667 81.493333 82.986666 110.72 0 115.2-208.853333 177.28-405.333333 177.28zM512 516.48a130.133333 130.133333 0 1 1 129.92-130.133333 130.133333 130.133333 0 0 1-129.92 130.133333z m0-208.213333a78.08 78.08 0 1 0 77.866667 78.08A78.08 78.08 0 0 0 512 308.266667z"
                      p-id="2098"
                      fill="#AF00C8"
                    ></path>
                  </svg>
                  <a style="color: black; display: block; margin-left: 5px" :href="'http://api.map.baidu.com/marker?location='+floorData.latitude+','+floorData.longitude+'&title=当前位置&content='+floorData.address+'&output=html&src=webapp.baidu.openAPIdemo'">{{floorData.address}}</a>
                </span>
                <span class="info-c fail-title-color" v-else>{{failTitle}}</span>
              </div>

              <div class="average-info">
                <span class="info-name">联系方式:</span>
                <span class="info-c" v-if="floorData.directorPhone" style="display: flex; align-items: center">
                  <svg t="1617068762456" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2961" width="16" height="16">
                    <path
                      d="M731.7 451.9c0 21.9 14.6 35.4 35.4 35.4 21.9 0 35.4-14.6 35.4-35.4-0.5-118.7-96.3-214.6-215.1-215.1-21.9 0-35.4 14.6-35.4 35.4 0 21.9 14.6 35.4 35.4 35.4 79.7 0.5 143.8 64.6 144.3 144.3z m143.2 0c0 21.9 14.6 35.4 35.4 35.4s35.4-14.6 35.4-35.4c0-197.4-162-358.3-358.3-358.3-21.9 0-35.4 14.6-35.4 35.4s14.6 35.4 35.4 35.4c158.3 0 287.5 129.7 287.5 287.5zM390.6 326.4c39.6-39.6 42.7-100.5 7.3-143.2l-111-140.7C251.5-4.3 182.8-11.6 136.4 24.8c-3.1 3.1-7.3 3.1-7.3 7.3L31.8 129C-60.9 221.7 71.4 473.2 312 713.8s488 369.7 581.2 279.7l96.9-96.9c42.7-42.7 42.7-110.9 0-150.5l-7.3-7.3-140.2-110.9c-42.7-35.4-103.6-32.3-143.2 7.3l-60.9 60.9c-64.6-39.6-122.4-82.3-172.4-132.8-50-50.5-92.7-107.8-132.3-172.4-1-0.5 56.8-64.5 56.8-64.5zM340.1 229c10.4 14.6 10.4 35.4-3.1 46.9l-79.2 82.8c-11.5 11.5-14.1 28.6-7.3 42.7 42.2 78.1 95.8 148.9 157.8 212 62.5 62.5 133.8 115.6 212 157.8 14.6 6.8 31.8 4.2 42.7-7.3l82.3-82.3c14.6-14.6 32.3-14.6 46.9-3.1l140.1 115.1s3.1 0 3.1 3.1c14.1 13 14.6 34.9 1.6 49l-1.6 1.6-97 96.7c-46.9 46.9-268.7-71.9-480.7-279.7C146.8 455 31.8 229 78.6 182.1L179.1 81.6c14.6-10.4 39.6-10.4 50 7.3l111 140.1z"
                      fill="#AF00C8"
                      p-id="2962"
                    ></path>
                  </svg>
                  <a :href="'tel:'+floorData.directorPhone" style="color: black; margin-left: 5px">{{floorData.directorPhone}}</a>
                </span>
                <span class="info-c fail-title-color" v-else> {{failTitle}} </span>
              </div>
            </div>
          </div>

          <div class="floor-data" v-if="floorData.closed">
            <div class="data-title">
              <h2>楼盘数据</h2>
              <!-- <div class="data-query-time">
                <van-button @click="queryTimeFilter(1)" :class="{'isActive':type==1}">今日</van-button>
                <van-button @click="queryTimeFilter(2)" :class="{'isActive':type==2}">本周</van-button>
                <van-button @click="queryTimeFilter(3)" :class="{'isActive':type==3}">本月</van-button>
              </div> -->
            </div>
            <div class="data-list">
              <div class="data-list-item"><span class="data-num">{{floorData.orders?floorData.orders:0}}</span><span class="data-text">订单数</span></div>
              <div class="data-list-item"><span class="data-num">{{floorData.closed?floorData.closed:0}}</span><span class="data-text">已成交</span></div>
              <div class="data-list-item"><span class="data-num">{{floorData.visited?floorData.visited:0}}</span><span class="data-text">已到访</span></div>
            </div>
          </div>

          <div class="floor-message">
            <h2 class="floor-message-title">楼盘信息</h2>
            <div class="message-list">
              <div class="message-list-item">
                <span class="message-list-item-name">开发商:</span>
                <span class="message-list-item-content"> {{floorData.developers?floorData.developers:failTitle}}</span>
              </div>
              <div class="message-list-item">
                <span class="message-list-item-name">预计交房:</span>
                <span class="message-list-item-content"> {{floorData.deliveryTime?floorData.deliveryTime:failTitle}}</span>
              </div>
            </div>
          </div>
          <div class="floor-house-type">
            <h2 class="floor-message-title floor-house-type-title">在售户型</h2>
            <ul class="floor-house" v-if="floorData.houseTypeList&&floorData.houseTypeList.length>=1">
              <li class="floor-house-item" v-for="(item, index) in floorData.houseTypeList" :key="index">
                <div class="floor-house-item-img">
                  <img class="floor-house-item-img" :src="BASE_URL+item.url[0]" alt="~^_^~" />
                </div>
                <div class="floor-house-item-tips">
                  <span class="floor-house-item-area">建面{{item.acreage}}㎡</span>
                  <span class="floor-house-item-price"> 约{{item.unitPrice}}元/㎡</span>
                </div>
              </li>
            </ul>
            <ul class="floor-house-else" v-else>
              <img src="./main/images/empty.png" style="display: block; width: 100%; height: 100%" alt="" />
            </ul>
          </div>
        </div>
      </section>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          num: Math.random().toString().substr(2, 5),
          scrollTopHeight: '',
          otherClass: '',
          BASE_URL: 'http://172.16.6.209:8081',
          floorData: {},
          type: 1,
          failTitle: '网络出小差了',
        },

        methods: {
          scrollBarEvent() {
            this.scrollTopHeight = document.getElementById('app-content').scrollTop;
          },

          throttle(fn, delay) {
            let valid = true;
            return function () {
              if (!valid) {
                return false;
              }
              valid = false;
              setTimeout(() => {
                fn();
                valid = true;
              }, delay);
            };
          },

          //  获取url中参数
          getQueryVariable(variable) {
            let query = window.location.search.substring(1);
            let vars = query.split('&');
            for (let i = 0; i < vars.length; i++) {
              let pair = vars[i].split('=');
              if (pair[0] == variable) {
                return pair[1];
              }
            }
            return false;
          },

          // 根据参数获取楼盘详情
          async getData(id) {
            const { data } = await axios.get(`${this.BASE_URL}/house/houses/houseDetail`, { params: { id } });
            if (data.code && data.code === 200) {
              this.floorData = data.data;

              this.floorData.houseLabel = this.floorData.houseLabel ? this.floorData.houseLabel.split(',') : [];
              this.floorData.directorPhone = this.getQueryVariable('tel') ? this.getQueryVariable('tel') : this.floorData.directorPhone;
            }
          },
          queryTimeFilter(type) {
            this.type = type;
          },
        },

        mounted() {
          window.addEventListener('scroll', this.throttle(this.scrollBarEvent, 100), true);
          this.getData(this.getQueryVariable('id'));
        },
      });
    </script>
  </body>
</html>
